<template>
  <div class="problem-list-container">
    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <a-input-search
        v-model:value="searchText"
        placeholder="搜索题目"
        style="width: 200px"
        @search="onSearch"
      />
      <div class="filter-right">
        <a-select
          v-model:value="difficulty"
          style="width: 100px"
          placeholder="难度"
          @change="onFilterChange"
        >
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="0">简单</a-select-option>
          <a-select-option value="1">中等</a-select-option>
          <a-select-option value="2">困难</a-select-option>
        </a-select>
        <a-select
          v-model:value="status"
          style="width: 100px"
          placeholder="状态"
          @change="onFilterChange"
        >
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="solved">已解决</a-select-option>
          <a-select-option value="attempted">尝试过</a-select-option>
          <a-select-option value="unsolved">未开始</a-select-option>
        </a-select>
        <a-select
          v-model:value="tag"
          style="width: 120px"
          placeholder="标签"
          @change="onFilterChange"
        >
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="array">数组</a-select-option>
          <a-select-option value="string">字符串</a-select-option>
          <a-select-option value="dp">动态规划</a-select-option>
          <a-select-option value="tree">树</a-select-option>
        </a-select>
      </div>
    </div>

    <!-- 题目表格 -->
    <a-table
      :columns="columns"
      :data-source="problems"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <!-- 状态列 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <check-circle-filled v-if="record.status === 'solved'" class="status-icon solved" />
          <exclamation-circle-filled v-else-if="record.status === 'attempted'" class="status-icon attempted" />
          <minus-circle-filled v-else class="status-icon unsolved" />
        </template>

        <!-- 难度列 -->
        <template v-else-if="column.key === 'difficulty'">
          <a-tag :color="getDifficultyColor(record.difficulty)">
            {{ getDifficultyText(record.difficulty) }}
          </a-tag>
        </template>

        <!-- 通过率列 -->
        <template v-else-if="column.key === 'acceptRate'">
          <span :style="{ color: getAcceptRateColor(record.acceptRate) }">
            {{ record.acceptRate }}%
          </span>
        </template>

        <!-- 操作列 -->
        <template v-else-if="column.key === 'action'">
          <a-button type="link" @click="handleStart(record)">开始答题</a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { ref, onMounted, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import {
  CheckCircleFilled,
  ExclamationCircleFilled,
  MinusCircleFilled
} from '@ant-design/icons-vue'
import { getHOJProblemsList } from "@/api/hoj-problems.js";

export default {
  name: 'ProblemList',
  components: {
    CheckCircleFilled,
    ExclamationCircleFilled,
    MinusCircleFilled
  },
  setup() {
    const router = useRouter()
    const searchText = ref('')
    const difficulty = ref('')
    const status = ref('')
    const tag = ref('')
    const loading = ref(false)
    const problems = ref([])
    const pagination = ref({
      current: 1,
      pageSize: 10,
      total: 0,
      showTotal: total => `共 ${total} 题`
    })

    // 表格列定义
    const columns = [
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        align: 'center'
      },
      {
        title: '题号',
        dataIndex: 'id',
        key: 'id',
        width: 80
      },
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title'
      },
      {
        title: '难度',
        dataIndex: 'difficulty',
        key: 'difficulty',
        width: 100,
        align: 'center'
      },
      {
        title: '通过率',
        dataIndex: 'acceptRate',
        key: 'acceptRate',
        width: 100,
        align: 'center'
      },
      {
        title: '操作',
        key: 'action',
        width: 100,
        align: 'center'
      }
    ]

    // 获取题目列表
    const fetchProblems = async () => {
      loading.value = true
      const params = {
        currentPage: pagination.value.current,
        limit: pagination.value.pageSize,
        keyword: searchText.value,
        difficulty: difficulty.value
      }
      
      try {
        const resp = await getHOJProblemsList(params);
        if (resp.status === 200) {
          problems.value = resp.data.records;
          pagination.value.total = resp.data.total;
        }
      } catch (error) {
        console.error('获取题目列表失败:', error);
      } finally {
        loading.value = false;
      }
    }

    // 搜索处理
    const onSearch = (value) => {
      searchText.value = value
      pagination.value.current = 1
      fetchProblems()
    }

    // 筛选变化处理
    const onFilterChange = () => {
      pagination.value.current = 1
      fetchProblems()
    }

    // 表格变化处理
    const handleTableChange = (pag) => {
      pagination.value.current = pag.current
      pagination.value.pageSize = pag.pageSize
      fetchProblems()
    }

    // 开始答题
    const handleStart = (record) => {
      router.push(`/oj/problem/${record.problemId}`)
    }

    // 获取难度对应的颜色
    const getDifficultyColor = (difficulty) => {
      const colors = {
        0: 'success',
        1: 'warning',
        2: 'error'
      }
      return colors[difficulty] || 'default'
    }

    // 获取难度对应的文本
    const getDifficultyText = (difficulty) => {
      const texts = {
        0: '简单',
        1: '中等',
        2: '困难'
      }
      return texts[difficulty] || difficulty
    }

    // 获取通过率对应的颜色
    const getAcceptRateColor = (rate) => {
      if (rate >= 70) return '#3f8600'
      if (rate >= 40) return '#d4b106'
      return '#cf1322'
    }

    onMounted(() => {
      fetchProblems()
    })

    return {
      searchText,
      difficulty,
      status,
      tag,
      loading,
      problems,
      columns,
      pagination,
      onSearch,
      onFilterChange,
      handleTableChange,
      handleStart,
      getDifficultyColor,
      getDifficultyText,
      getAcceptRateColor
    }
  }
}
</script>

<style scoped>
.problem-list-container {
  width: 100%;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.filter-right {
  display: flex;
  gap: 8px;
}

.status-icon {
  font-size: 18px;
}

.status-icon.solved {
  color: #52c41a;
}

.status-icon.attempted {
  color: #faad14;
}

.status-icon.unsolved {
  color: #d9d9d9;
}

@media screen and (max-width: 768px) {
  .filter-section {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .filter-right {
    flex-wrap: wrap;
  }
}
</style> 